<template>
  <div>
    <div class="navbar">
      <ul>
        <li @click="getSong" :class="{active:isActive('/song')}">单曲</li>
        <li @click="getArtist" :class="{active:isActive('/artist')}">歌手</li>
        <li>专辑</li>
        <li @click="getVideo" :class="{active:isActive('/video')}">视频</li>
        <li @click="getGd" :class="{active:isActive('/gds')}">歌单</li>
        <li>歌词</li>
        <li>播客</li>
        <li>用户</li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    getSong() {
      this.$router.push({
        name: "song",
        query: { keywords: this.$route.query.keywords },
      });
    },
    getArtist() {
      this.$router.push({
        name: "artist",
        query: { keywords: this.$route.query.keywords },
      });
    },
    getVideo(){
      this.$router.push({
        name:'video',
        query:{keywords:this.$route.query.keywords}
      })
    },
    getGd(){
       this.$router.push({
        name: "gds",
        query: { keywords: this.$route.query.keywords },
      });
    }
  },
  computed: {
    isActive() {
      return function (path) {
        return this.$route.path.includes(path);
      };
    },
  },
};
</script>

<style scoped>
.navbar{
  margin-bottom: 20px;
}
ul {
  display: flex;
}
ul li {
  margin-right: 20px;
  padding: 10px 0;
}
.active {
  border-bottom: 5px solid #ec4141;
}
</style>